<template>
	<view class="data">
		<view class="item" v-for="item in itemList" :key="item.id" @click="change(item.id)">
			<view class="title">
				{{item.name}}
			</view>
			<view class="value">
				<image :src="item.value" v-if="item.id === 1"></image>
				<text v-else>{{item.value}}</text>
				<view class="active-item-icon2 next iconfont icon-youjiantou1"></view>
			</view>
		</view>
		<view class="item"  @click="addClass">
			<view class="title">
				班级
			</view>
			<view class="value">
				<text>{{clazz == null ? '无' : clazz.name}}</text>
				<view class="active-item-icon2 next iconfont icon-youjiantou1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList : [{
					id : 1,
					name: "头像",
					value: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20190318%2Fd2cea578de0e4c9a8d5398db6d4e05da.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639114286&t=4886388bff3febc6fbcf06a8f93261f0"
				},{
					id : 2,
					name: "姓名",
					value: "无"
				},{
					id : 3,
					name: "年龄",
					value: "无"
				},{
					id : 4,
					name: "性别",
					value: "无"
				},{
					id : 5,
					name: "出生日期",
					value: "无"
				},{
					id : 6,
					name: "手机",
					value: "无"
					
				}],
				userinfo:{},
				reFresh: "",
				myHeaders: {
					Authorization: uni.getStorageSync("token")
				},
				clazz: {}
				
			}
		},
		onLoad:function(){
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			
			this.getUserInfo();
			console.log(this.itemList[0].name)
			//获取当前用户的班级信息
			this.getClazz();

		},
		onBackPress(){
			let pages = getCurrentPages();
			let page = pages[pages.length -2];
			page.$vm.reFresh = Math.random();
		},
		watch:{
			reFresh(){
				this.getUserInfo();
				this.getClazz();
				console.log("页面已重新加载");
			}
		},
		methods: {
			//加入班级
			addClass(){
				uni.navigateTo({
				    url: '/pages/update-user/index?name=班级'
				});
			},
			async getClazz(){
				const resp = await this.$myRequest({
					url: "/api/student/classes/currentClazz"
				});
				if( resp.data.code == 200){
					this.clazz = resp.data.obj;
				}
			},
			//上传头像
			changeImg(){
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							// url: 'http://localhost:8081/api/upload/image', //仅为示例，非真实的接口地址
							url: "/api/upload/image",
							filePath: tempFilePaths[0],
							name: 'file',
							header: this.myHeaders,
							success: (uploadFileRes) => {
								this.getUserInfo(); //重新刷新数据
							}
						});
					}
				});
			},
			change(i){
				if( i == 1){
					uni.showActionSheet({
						itemList: ['更换头像'],
						success: (resp) => {
							switch( resp.tapIndex){
								case 0:
									this.changeImg();
									return;
								default: return;
							}
						}
					})
				}else{
					uni.navigateTo({
					    url: '/pages/update-user/index?name='+this.itemList[i-1].name
					});
				}
			},
			async getClassById(){
				const resp = await this.$myRequest({
					url: "/api/student/classes/currentClazz"
				})
				if(resp.data.code == 200){
					this.clazz = resp.data.obj
				}
			},
			//获取用户信息
			async getUserInfo(){
				const resp = await this.$myRequest({
					url : "/login/info"
				});
				if(resp){
					
					let itemList = [{
						id : 1,
						name: "头像",
						value: resp.data.imagePath == null ? "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20190318%2Fd2cea578de0e4c9a8d5398db6d4e05da.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639114286&t=4886388bff3febc6fbcf06a8f93261f0":resp.data.imagePath
					},{
						id : 2,
						name: "姓名",
						value: resp.data.realName == null ? "无":resp.data.realName
					},{
						id : 3,
						name: "年龄",
						value: resp.data.age == null ? "无" : resp.data.age
					},{
						id : 4,
						name: "性别",
						value: resp.data.sex == 1 ? '男':'女'
					},{
						id : 5,
						name: "出生日期",
						value: this.dateFormat(resp.data.birthDay)
					},{
						id : 6,
						name: "手机",
						value: resp.data.phone == null ? '无' : resp.data.phone
					}];
					this.itemList = itemList;
				}
			},
			//日期格式化
			dateFormat(originVal){
			  const dt = new Date(originVal)
			  
			  const y = dt.getFullYear()
			  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
			  const d = (dt.getDate() + '').padStart(2,'0')
			
			  const hh = (dt.getHours() + '').padStart(2,'0')
			  const mm = (dt.getMinutes() + '').padStart(2,'0')
			  const ss = (dt.getSeconds() + '').padStart(2,'0')
			
			  return `${y}-${m}-${d}`
			}
		}
	}
</script>

<style lang="scss">
.data{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	.item{
		width: 92%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 40rpx;
		background-color: #fff;
		margin-top: 2rpx;
		box-sizing: border-box;
		.title{
			font-size: 32rpx;
			color:#212121;
		}
		.value{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #BFBFBF;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
			}
			.iconfont{
				margin-left: 6rpx;
				font-weight: bold;
				color:#BFBFBF;
			}
		}
	}
	.item:first-child{
		margin-top: 40rpx;
		border-radius: 20rpx 20rpx 0 0rpx;
	}
	.item:last-child{
		border-radius:  0 0 20rpx 20rpx;
	}
}
</style>
